<template>
	<div>
		<div class="classfication">
			<div style="margin:0 5px;font-size: 18px;color: #169bd5;">分类管理</div>
			<el-button type="primary" class='pass-btn' @click='addList'>新增</el-button>
		</div>
		</el-form>
		<el-table
		    :data="classifylist"
		    style="width: 100%">
		    <el-table-column
		      prop="num"
		      label="序号">
		      <template scope="scope">{{ scope.$index +1 }}</template>
		    </el-table-column>
		    <el-table-column
		      prop="classifyName"
		      label="分类名称">
		      <template scope="scope">{{ scope.row.classifyName }}</template>
		    </el-table-column>
		    <el-table-column
		      prop="className"
		      label="关联业态">
		      <template scope="scope">{{ scope.row.className }}</template>
		    </el-table-column>
		    <el-table-column
		      label="操作">
		      <template scope="scope">
		        <el-button  type="text" size="small" @click='handleEdit(scope.$index,scope.row)'>编辑</el-button>
		        <el-button type="text" size="small"  @click='handleDelete(scope.$index,scope.row)'>删除</el-button>
		      </template>
		    </el-table-column>
		</el-table>
		<div v-show='isShowModal'>
			<transition name="fade">
		        <div class="form-view"  @scroll.prevent>
		            <div class="form-layer">
		               <el-form class='add-classify' ref="form" label-width="120px">
		               		<el-form-item label="分类名称">
							    <el-input v-model="classifyName" placeholder="请输入分类名称"></el-input>
							  </el-form-item>
							  <el-form-item label="关联业态">
							    <el-select v-model="className" placeholder="请选择业态" @change='handleSelectClass'>
							      <el-option v-for='item in classlist' :key='item.id' :label="item.className" :value="item.className"></el-option>
							    </el-select>
							  </el-form-item>
							  <div class="add-btn">
								  <el-button type="primary" @click='handleAddClassify' v-show='isShowAddBtn'>添加</el-button>
								  <el-button type="primary" @click='handleConfirmEdit' v-show='!isShowAddBtn'>确定</el-button>
	    						  <el-button type="danger" @click='closeModal'>取消</el-button>
    						  </div>
		               </el-form>
	            	</div>
	        	</div>
		    </transition>
		</div>
	</div>
</template>

<script>
	export default {
		data (){
			return {
				form: {
		          	name: '',
		          	region: ''
		        },
		        isShowAddBtn:true,
		        classifylist:[],
		        classlist:[],
		        isShowModal:false,
		        classifyName:'',
		        className:'',
		        classId:'',
		        listIndex:0,
		        classifyNameList:[]
			}
		},

		methods:{

			getClassifyData(){
				this.$http.post('marketweb/actionclassify/queryActionclassifys',
		          {keyAdmin:this.$store.state.keyAdmin}).then(response => {
		              this.classifylist = response.body.classifylist;
		            }, response => {
		              this.$message.error("获取分类列表数据失败");
		        })
			},

			addList(){
				this.isShowModal = true;
				this.className = '';
				this.classifyName = '';
			},

			closeModal(){
				this.isShowModal = false;
				this.isShowAddBtn = true;
			},

			handleDelete(index,row){
				let self = this
				self.$confirm('确定要删除此分类信息?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		          self.$http.post('marketweb/actionclassify/deleteClassify',
		          {
		          	keyAdmin:self.$store.state.keyAdmin,
		          	id:row.id
		          }).then(response => {
		          	if(response.body.code == 200){
		          		 self.$message({
				          message: '删除成功',
				          type: 'success'
				        });
		          		 self.getClassifyData()
		          	}
		            }, response => {
		              this.$message.error("删除数据失败");
		        })
		        }).catch(() => {
		          self.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
				
			},

			handleAddClassify(){
				this.isShowModal = false;
				let self = this
				this.$confirm('确定要添加此分类信息?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'info'
		        }).then(() => {
		          self.$http.post('marketweb/actionclassify/save',
		          {
		          	keyAdmin:self.$store.state.keyAdmin,
		          	classId:self.classId,
		          	className:self.className,
		          	classifyName:self.classifyName
		          }).then(response => {
		          	if(response.body.code == 200){
		          		 self.$message({
				          message: '添加成功',
				          type: 'success'
				        });
		          		 self.getClassifyData()
		          	}
		            }, response => {
		              this.$message.error("添加数据失败");
		        })
	        }).catch(() => {
	          this.$message({
	            type: 'info',
	            message: '已取消操作'
	          });          
        });
				
		          
			},

			handleEdit($index){
				this.isShowModal = true;
				this.isShowAddBtn = false;
				this.listIndex = $index;
				this.className = this.classifylist[this.listIndex].className;
				this.classifyName = this.classifylist[this.listIndex].classifyName;
			},

			handleConfirmEdit(){
				let self = this;
				this.isShowModal = false;
				this.isShowAddBtn = true;
				this.$confirm('确定要修改此分类信息?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'info'
		        }).then(() => {
         		 this.$http.post('marketweb/actionclassify/update',
		          {
		          	keyAdmin:this.$store.state.keyAdmin,
		          	id:this.classifylist[this.listIndex].id,
		          	classId:this.classId,
		          	className:this.className,
		          	classifyName:this.classifyName
		          }).then(response => {
		          	if(response.body.code == 200){
		          		 self.$message({
				          message: '修改成功',
				          type: 'success'
				        });
		          		 self.getClassifyData()
		          	}
		            }, response => {
		              this.$message.error("修改数据失败");
		        })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
				
			},

			getClassifyNameList(){
				const arr = []
				for (var i = 0; i < this.classifylist.length; i++) {
					arr.push(this.classifylist[i].classifyName)
				}
				for (var i = 0; i < arr.length; i++) {
					if(this.classifyNameList.indexOf(arr[i]) == -1){
						this.classifyNameList.push(arr[i])
					}
				}
			},

			handleAddClass(){
				this.$http.post('marketweb/mappoi/queryClass',
		          {keyAdmin:this.$store.state.keyAdmin}).then(response => {
		              this.classlist = response.body.classlist;
		            }, response => {
		              this.$message.error("加载业态列表失败");
		        })
			},

			handleSelectClass($event){
				for (var i = 0; i < this.classlist.length; i++) {
					if(this.classlist[i].className == $event){
						this.classId = this.classlist[i].id
					}
				}
			}
		},
		created(){
			this.handleAddClass()
			this.getClassifyData()
			
		}
	}
</script>

<style scoped>
	.classfication{
		display: flex;
	    justify-content: space-between;
	    padding: 0 10px;
	    border-bottom:2px solid #169bd5;
	    padding-bottom: 5px;
	    margin-bottom: 10px;
	}
	.classfication-choice{
		padding: 20px 0 0px;
		margin: 10px 0;
		background: #eee;
	}
	.classification-btn{
		padding: 0 20px;
	}
	.pass-btn{
    	padding: 8px 10px;
  	}
	.fade-enter-active,
	.fade-leave-active {
	     transition: opacity .5s
	}
	.fade-enter,
	.fade-leave-active {
	     opacity: 0
	}
	.form-view {
	    position: relative;
	    width: 100%;
	    height: 100%;
	    z-index: 3;
	    overflow: hidden;
	}
	.form-layer {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    z-index: 999;
	    top: 0;
	    left: 0;
	    background: rgba(0, 0, 0, 0.2);
	    overflow: hidden;
	}
	.add-classify{
		background: #eee;
		width: 400px;
		height: 200px;
		border-radius: 10px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -150px;
		margin-left: -250px;
		padding: 50px;
	}
	.add-btn{
		text-align: center;
		padding-top: 20px;
	}
</style>